<template>
  <view class="echarts-container">
    <l-echart ref="chartRef" :customStyle="chartStyle"></l-echart>
  </view>
</template>

<script>
import lEchart from "../../../uni_modules/lime-echart/components/l-echart/l-echart.vue";
const echarts = require("../../../uni_modules/lime-echart/static/echarts.min");
export default {
  components: { lEchart },
  name: "echarts",
  props: {
    option: {
      type: Object,
      required: true,
    },
    height: {
      type: String,
      default: "400rpx"
    },
    width: {
      type: String,
      default: "100%"
    }
  },
  computed: {
    chartStyle() {
      return `width: ${this.width}; height: ${this.height};`;
    }
  },

  watch: {
    option: {
      async handler(newVal) {
        // chart 图表实例不能存在data里
        const chart = await this.$refs.chartRef.init(echarts);
        chart.setOption(this.option);
      },
      deep: true,
    },
  },

  mounted() {
    setTimeout(async () => {
      const chartRef = this.$refs.chartRef;
      if (!chartRef) return;
      const myChart = await chartRef.init(echarts);
      console.log("Finished init");
      myChart.setOption(this.option);
    }, 300);
  },
};
</script>

<style scoped>
.echarts-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
</style>
